<template>
  <div class="container">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
      right-text="保存"
      @click-right="save"
    />
    <!-- 用户资料 -->
    <van-cell-group>
      <van-cell is-link title="头像" @click="showPhoto = true" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="photo"
        />
      </van-cell>
      <van-cell
        is-link
        title="名称"
        @click="showName = true"
        :value="user.name"
      />
      <van-cell
        is-link
        title="性别"
        @click="showGender = true"
        :value="user.gender === 0 ? '男' : '女'"
      />
      <van-cell
        is-link
        arrow-direction="down"
        title="生日"
        @click="openDate()"
        :value="user.birthday"
      />
    </van-cell-group>
    <!-- 资料修改===>弹出层 -->
    <van-popup v-model="showPhoto" position="bottom">
      <input
        type="file"
        name=""
        id=""
        style="display: none"
        ref="upFile"
        @change="uploadFile"
      />
      <van-cell
        value="本地相册选择"
        is-link
        arrow-direction="down"
        @click="$refs.upFile.click()"
      />
      <van-cell value="拍照" is-link arrow-direction="down" />
    </van-popup>
    <van-popup v-model="showName" position="bottom">
      <van-field v-model="user.name" required placeholder="请输入用户名" />
    </van-popup>
    <van-popup v-model="showGender" position="bottom">
      <van-cell
        value="男"
        @click="changeGender(0)"
        is-link
        arrow-direction="up"
      />
      <van-cell
        value="女"
        @click="changeGender(1)"
        is-link
        arrow-direction="left"
      />
    </van-popup>
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        title="选择生日"
        v-model="nowDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday = false"
        @confirm="confirmDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { getUserProfile, updateUserInfo, updateUserPhoto } from '@/api/user.js'
import dayjs from 'dayjs'
export default {
  name: 'user-profile',
  data () {
    return {
      // 弹窗控制
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前选中日期
      nowDate: new Date(),
      // 最小可选日期
      minDate: new Date('1950-01-01'),
      // 日期控件 最大可选日期
      maxDate: new Date(),
      // 默认用户信息
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  methods: {
    // 读取上传的文件
    uploadFile (e) {
      try {
        // 拿到文件列表FileList一个数组
        // console.log(e.target.files)
        const fileImg = e.target.files[0] // 拿到文件flie信息
        // 1.创建读取文件的实例
        const fr = new FileReader()
        // 2.读取file对象
        fr.readAsDataURL(fileImg)
        // 3.等待读取完成 load事件 回调获取结果
        // 文件读取是异步的===>等待读完完成 load事件
        fr.onload = (e) => { // 箭头函数里的this执行不可以更改(call,apply,bind改都不行)
          // console.log(e.target.result) 拿到一个base64格式的图片路径
          this.photo = fr.result
          // 关闭弹窗
          this.showPhoto = false
        }
      } catch (error) {
        console.dir(error)
      }
    },
    async getUserProfile () {
      // 获取编辑资料中的 用户资料信息
      const { data } = await getUserProfile()
      console.log('用户编辑信息', data)
      this.user = data
      // 再单独给用户头像赋值===>需要单独发请求(只需要请求参数photo所以单独拎出来)
      this.photo = data.photo
    },
    ...mapMutations('chat', ['setPhoto']),
    async save () {
      try {
        // 如果用户不编辑头像不打开上传头像的弹层 ===> 那么input:file DOM元素根本都没有加载===>undefined
        // 要确认点击了头像弹层 并且上传了头像才发更新头像的请求
        if (this.$refs.upFile && this.$refs.upFile.files[0]) {
          // 更新头像
          const { data } = await updateUserPhoto(this.$refs.upFile.files[0])
          // console.log('更新头像请求响应参数', data) 难道data.photo 调用vuex中的mutations方法存到vuex中给全局使用state
          this.setPhoto(data.photo)
        }
        // 更新个人资料
        await updateUserInfo(this.user)
        this.$toast.success('保存成功')
      } catch (error) {
        console.dir(error)
        this.$toast.fail('保存失败')
      }
    },
    // 打开日期选择
    openDate () {
      // 有生日数据
      if (this.user.birthday) {
        this.nowDate = new Date(this.user.birthday)
      }
      this.showBirthday = true
    },
    // 确认选择日期
    confirmDate (value) {
      console.log(value)
      // 确认时间后  把Date转换成String
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      this.showBirthday = false
    },
    changeGender (gender) {
      // 选择性别 gender 0 男  1 女
      this.user.gender = gender
      // 关闭性别Popup
      this.showGender = false
    }

  },
  created () {
    this.getUserProfile()
  }
}
</script>

<style scoped lang='less'></style>
